<template>
	<div id = "Personal">
		<div class = "left-list">
			<div class = "list-title">
				<div class='icon'> </div>
				<p>个人信息</p>
			</div>
			<ul>
				<li>
					<a href="" @click.prevent="">个人信息</a>
				</li>
				
			</ul>
		</div>
		<div class ="Personal-show">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="less" scoped>
		#Personal{
		display: flex;
		display: -webkit-flex;
		height: 700px;
		width: 100%;
		flex-flow: row nowrap;
		
		.left-list{
			flex:1;
			background-color: hsla(0,0,1,.8); 
			
			margin-right: 5px;
			box-shadow:0px 0px 3px 2px rgba(0,0, 0,0.1) inset;
			.list-title{
				padding-top: 20px;
				height: 40px;
				text-align: left;
				padding-left:20px; 
				.icon{
					background: url('../../assets/icon/Personal.png') no-repeat;
					background-size:22px 22px;
					width: 22px;
					height: 22px;
					display: inline-block;
					margin-right:5px; 
					
				}
				p{
					font-size: 18px;	
					display: inline-block;
					color: #333;
					
				}
			}
			
			ul li{
				margin-top: 50px;
				font-size: 18px;
				
				a{
					color: black;
					font-size:16px;
					color: rgba(0, 0,0, .6)
				}
				&::before{
					content: ' ';
					display: inline-block;
					margin-right:10px; 
					margin-bottom:2px; 
					width: 8px;
					height: 8px;
					
					background-color: rgba(0, 0,0, .5);
					border-radius:50%; 
				}
			}
		}
		.Personal-show{
			flex:6;
			background-color: hsla(0,0,1,.8); 
		}
	}
</style>
